<template>
<div id="Login">
  <img :src="'./static/namelogo.png'" style="height: 2.4rem; margin: 1.5rem auto 0;"/>
  <input v-model="username" placeholder="请输入用户名" style="margin-top: 1.14rem;"/>
  <input v-model="password" placeholder="请输入密码" style="margin-top: 0.4rem;" type="password"/>
  <div @click="login" class="login-btn">登录</div>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class Login extends Vue {

  username: string = ''
  password: string = ''
  openid: string = ''

  login() {
    let username = this.username;
    let password = this.password;
    if(!username){ this.$toast('请输入用户名'); return ; }
    if(!password){ this.$toast('请输入密码'); return ; }
    let query = { username: username, password, openid: this.openid || null };
    axios.post('/api/login/username', { query }).then((res: any) => {
      let userInfo = res || { token: '' };
      this.loginFunc(userInfo);
    });
  } 

  getQueryString(name: any){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return unescape(r[2]); return null;
  }

  openidLogin(code: any) {
    axios.get('/api/login/wxWebOpenId', { code }).then((res: any) => {
      if(res && res.openid) {
        this.openid = res.openid;
        let query = { openid: res.openid };
        axios.post('/api/login/username', { query }).then((user: any) => {
          let userInfo = user || { token: '' };
          if(userInfo.openid != this.openid) userInfo.openid = this.openid;
          this.loginFunc(userInfo);
        });
      }
    });
  }

  loginFunc(userInfo: any) {
    this.$store.commit('setUserInfo', userInfo);
    if (this.$store.getters.ifKefu) {
      this.$router.push('Order');
    } else if ( userInfo.roleType == 4 ) {
      this.$router.push('QD_Statistics');
    } else if ( userInfo.role.experience == 0 ) {
      this.$router.push('ZS_Statistics');
    } else {
      this.$router.push('Statistics');
    }
  }

  mounted() {
    let code = this.getQueryString("code");
    if(code) this.openidLogin(code);
  }

  beforeRouteLeave (to: any, form: any, next: any) {
    console.log('离开')
    console.log(to, form, next);
  }
  
  beforeRouteUpdate (to: any, form: any, next: any) {
    console.log('升级')
    console.log(to, form, next);
  }
  
  beforeEnter (to: any, form: any, next: any) {
    console.log('进入')
    console.log(to, form, next);
  }
};
</script>

<style lang="scss">
#Login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  input {
    display: block;
    width: 6.7rem;
    height: 0.88rem;
    line-height: 0.88rem;
    margin: 0 auto;
    text-align: center;
    font-size: 0.3rem;
    color: #808080;
    border: solid 1px #b2b2b2;
    border-radius: 0.1rem;
    outline: none;
    &:focus {
      outline: none;
    }
  }
  .login-btn {
    width: 6.7rem;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.3rem;
    border-radius: 0.1rem;
    background: #18a3dc;
    margin: 0.8rem auto 0;
    letter-spacing: 0.05rem;
  }
}
</style>

